<template>
    <div class="panel panel-default">
        <div class="panel-heading">文章归档</div>
        <div class="panel-body">
            <div v-if="loading"><span class="glyphicon glyphicon-refresh">loading...</span></div>
            <transition name="archives">
            <div v-if="!loading">
                <template v-for="(art,index) in articles">
                    <template
                            v-if="index===0||art.created_at.substring(5,7) !== articles[index-1].created_at.substring(5,7)">
                        <h3>{{art.created_at.substring(0, 7) }}</h3>
                        <hr>
                    </template>
                    <div class="archives-title">
                        <time>{{art.created_at.substring(5, 10)}}</time>
                        <a :href="'#/article/'+art.id">{{art.title}}</a></div>

                </template>
            </div>
            </transition>
        </div>
    </div>
</template>

<script>
    export default{
        data(){
            return {
                articles: null,
                loading: false,
                time: ""
            }
        },
        watch: {
            '$route' (to, from) {
                this.getArtByDate();
            }
        },
        created(){
            this.getArtByDate();
        },
        methods: {
            getArtByDate(){
                var date = this.$route.params.date;
                var vm = this;
                vm.loading=true;
                $.get("api/getArtByDate?date=" + date, function (json) {
                    vm.loading=false;
                    vm.articles = $.parseJSON(json);
                })
            }
        }

    }
</script>

<style scoped>
    .archives-enter-active{
        transition: all .5s;
    }
    .archives-enter{
        opacity: 0;
        transform: translateX(10px);
    }
</style>